<template>
  <a-form
    class="margin-y-15"
    :label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
    :wrapper-col="{
      md: { span: 17 },
      sm: { span: 20 },
      xs: { span: 24 }
    }"
  >
    <a-row :gutter="24">
      <a-col :md="24" :sm="24" :xs="24">
        <table cellpadding="0" cellspacing="0" class="recepit_table">
          <tbody>
            <tr
              ><td
                class="fw-bolder"
                colspan="8"
                style="background-color: #f5f5f5"
                >货品详情</td
              ></tr
            >
            <tr v-for="(item, index) in goods" :key="index">
              <td v-if="item[0] && item[0].name">{{ item[0].name }}</td>
              <td :class="{ mohu: item[0].do_secret == 1 }" v-if="item[0]">
                <template
                  v-if="
                    item[0].column_type == 'select' ||
                    item[0].column_type == 'selectajax' ||
                    item[0].column_type == 'selectajaxlike'
                  "
                >
                  {{ item[0].value_name }}
                </template>
                <template v-else>
                  {{ item[0].value }}
                </template>
              </td>
              <td v-if="item[1] && item[1].name">{{ item[1].name }}</td>
              <td :class="{ mohu: item[1].do_secret == 1 }" v-if="item[1]">
                <template
                  v-if="
                    item[1].column_type == 'select' ||
                    item[1].column_type == 'selectajax' ||
                    item[1].column_type == 'selectajaxlike'
                  "
                >
                  {{ item[1].value_name }}
                </template>
                <template v-else>
                  {{ item[1].value }}
                </template>
              </td>
              <td v-if="item[2] && item[2].name">{{ item[2].name }}</td>
              <td :class="{ mohu: item[2].do_secret == 1 }" v-if="item[2]">
                <template
                  v-if="
                    item[2].column_type == 'select' ||
                    item[2].column_type == 'selectajax' ||
                    item[2].column_type == 'selectajaxlike'
                  "
                >
                  {{ item[2].value_name }}
                </template>
                <template v-else>
                  {{ item[2].value }}
                </template>
              </td>
              <template v-if="index == 0">
                <td v-if="item[3] && item[3].name">{{ item[3].name }}</td>
                <td :class="{ mohu: item[3].do_secret == 1 }" v-if="item[3]">
                  <template
                    v-if="
                      item[3].column_type == 'select' ||
                      item[3].column_type == 'selectajax' ||
                      item[3].column_type == 'selectajaxlike'
                    "
                  >
                    {{ item[3].value_name }}
                  </template>
                  <template v-else-if="item[3].column_type == 'image'">
                    <!-- <img
                      :src="item[3].thumb_url"
                      style="width: 80px; height: 80px"
                    /> -->
                    <a-image
                      :width="40"
                      :src="item[3].thumb_url"
                      :preview="{
                        src: `${item[3].thumb_url}`
                      }"
                    />
                  </template>
                  <template v-else>
                    {{ item[3].value }}
                  </template>
                </td>
              </template>
              <template v-if="index != 0">
                <td v-if="item[3] && item[3].name">{{ item[3].name }}</td>
                <td :class="{ mohu: item[3].do_secret == 1 }" v-if="item[3]">
                  <template
                    v-if="
                      item[3].column_type == 'select' ||
                      item[3].column_type == 'selectajax' ||
                      item[3].column_type == 'selectajaxlike'
                    "
                  >
                    {{ item[3].value_name }}
                  </template>
                  <template v-else-if="item[3].column_type == 'image'">
                    <a-image
                      :width="40"
                      :src="item[3].thumb_url"
                      :preview="{
                        src: `${item[3].thumb_url}`
                      }"
                    />
                  </template>
                  <template v-else>
                    {{ item[3].value }}
                  </template>
                </td>
              </template>
            </tr>
          </tbody>
        </table>

        <div>
          <div class="fs-16 fw-bolder margin-y-15">主石信息</div>
          <div>
            <vxe-table
              border
              show-overflow
              :column-config="{ resizable: true }"
              :loading="table1.loading"
              :data="table1.tableData"
            >
              <vxe-column type="seq" title="NO" width="60" fixed="left" />
              <vxe-column
                :field="
                  item.column_type == 'select' ||
                  item.column_type == 'selectajax'
                    ? item.column + '_name'
                    : item.column
                "
                :title="item.name"
                width="150"
                v-for="(item, index) in table1.column"
                :key="index"
              />
            </vxe-table>
          </div>
        </div>
        <div>
          <div class="fs-16 fw-bolder margin-y-15">副石信息</div>
          <div>
            <vxe-table
              border
              show-overflow
              :column-config="{ resizable: true }"
              :loading="table2.loading"
              :data="table2.tableData"
            >
              <vxe-column type="seq" title="NO" width="60" fixed="left" />
              <vxe-column
                :field="item.column"
                :title="item.name"
                width="150"
                v-for="(item, index) in table2.column"
                :key="index"
              />
            </vxe-table>
          </div>
        </div>
      </a-col>
    </a-row>
  </a-form>
</template>

<script setup>
  import { ref, reactive, onMounted, watch } from 'vue';

  const props = defineProps({
    info: Object,
    goods: Object,
    table1: Object,
    table2: Object
  });
  console.log(props.goods.length);
  const goods = ref([]);
  onMounted(async () => {
    await props.goods.forEach((item, index) => {
      if (item.column_type == 'image') {
        props.goods.splice(index, 1);
      }
    });
    goods.value = await getArray(props.goods, 4);
  });
  const getArray = (arr, size) => {
    let data = {
      column_type: 'image',
      name: '图片',
      thumb_url: props.info.thumb_url ? props.info.thumb_url : ''
    };
    arr.splice(3, 0, data);
    console.log('arr.length', arr.length);
    // arr是一维数组 size是二维数组包含几条数据
    var arr2 = [];
    for (var i = 0; i < arr.length; i = i + size) {
      /* if (i == 0) {
        console.log('i=1=', i);
        arr2.push(arr.slice(0, 3));
      } else if (i == 4) {
        console.log('i=2=', i);
        arr2.push(arr.slice(3, 6));
      } else if (arr.length - 4 >= 4) {
        console.log('i==', i);
        arr2.push(arr.slice(i - 2, i - 2 + size));
      } */
      arr2.push(arr.slice(i, i + size));
    }
    /* arr2[0][3] = {
      column_type: 'image',
      name: '图片',
      thumb_url: props.info.thumb_url ? props.info.thumb_url : ''
    }; */
    console.log('arr2', arr2.length, arr2);
    return arr2; // 新的二维数组
  };
</script>
<style scoped></style>
